<!-- @format -->

<template>
  <UseSpace title="尝试手写 Form 组件">
    <!-- :initial-values="theInitialValues" -->
    <Form @submit="onSubmit">
      <FieldArray
        ref="theFieldArrayRef"
        name="theInitialValues"
        v-slot="{ push, remove }"
      >
        <div v-for="(entry, idx) in theInitialValues" :key="entry.key">
          <!-- {{ entry }} -->
          <el-space direction="vertical" alignment="flex-start">
            <Field
              v-slot="{ field }"
              :name="entry['fieldValue']"
              :rules="entry?.rule"
              :label="entry?.field"
            >
              {{ field.value }}
              <FormItem
                :data="entry"
                v-validate.immediate="'required|email'"
                v-model="entry['fieldValue']"
              />
            </Field>
            <ErrorMessage as="div" :name="entry['fieldValue']" />
          </el-space>
          <button type="button" @click="remove(idx)">Remove</button>
        </div>
        <button type="button" @click="push({ type: 'Input' })">Add</button>
      </FieldArray>
      <button type="submit">Submit</button>
    </Form>
  </UseSpace>
</template>
<script lang="ts" setup>
  import { onMounted, ref, markRaw, defineAsyncComponent } from 'vue'
  import { Field, Form, FieldArray, ErrorMessage } from 'vee-validate'
  import * as yup from 'yup'
  import FormItem from './form-item/Index.vue'
  import { theComponentsTypeArr } from './conf'
  import { theInitialValues } from './mock-data'
  import { FormProSchema } from './types'

  const validateEmail = yup.string().required()
  function onSubmit(values, actions) {
    // console.log('values ===>', values, actions)
    // actions.setErrors({
    //   textarea: 'this field is already taken',
    //   password: 'someone already has this password',
    // })
    console.log('values ===>', JSON.parse(JSON.stringify(values)))
  }
  onMounted(() => {})
</script>
